<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Webpixels">
    <title>Quick – Website UI Kit (FREE)</title>
    <!-- Preloader -->
    <style>
        @keyframes hidePreloader {
            0% {
                width: 100%;
                height: 100%;
            }

            100% {
                width: 0;
                height: 0;
            }
        }

        body>div.preloader {
            position: fixed;
            background: white;
            width: 100%;
            height: 100%;
            z-index: 1071;
            opacity: 0;
            transition: opacity .5s ease;
            overflow: hidden;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body:not(.loaded)>div.preloader {
            opacity: 1;
        }

        body:not(.loaded) {
            overflow: hidden;
        }

        body.loaded>div.preloader {
            animation: hidePreloader .5s linear .5s forwards;
        }
    </style>
    <script>
        window.addEventListener("load", function() {
            setTimeout(function() {
                document.querySelector('body').classList.add('loaded');
            }, 300);
        });
    </script>
    <!-- Favicon -->
    <link rel="icon" href="../../assets/img/brand/favicon.png" type="image/png"><!-- Font Awesome -->
    <link rel="stylesheet" href="../../assets/libs/@fortawesome/fontawesome-free/css/all.min.css">
    <!-- Quick CSS -->
    <link rel="stylesheet" href="../../assets/css/quick-website.css">
    <!-- Docs CSS - used only for demo -->
    <link rel="stylesheet" href="../../docs/assets/css/docs.css">
</head>

<body class="docs">
    <!-- Nav -->
    <header class="header" id="header-main">
        <!-- Main navbar -->
        <nav class="navbar navbar-main navbar-expand-lg fixed-top navbar-shadow navbar-light bg-white border-bottom" id="navbar-main">
            <div class="container-fluid justify-content-between">
                <!-- User's navbar -->
                <div class="navbar-user d-lg-none">
                    <ul class="navbar-nav flex-row align-items-center">
                        <li class="nav-item">
                            <a href="#" class="nav-link nav-link-icon sidenav-toggler" data-action="sidenav-pin" data-target="#sidenav-main"><i data-feather="menu"></i></a>
                        </li>
                    </ul>
                </div>
                <!-- Navbar brand -->
                <a class="navbar-brand" href="../../docs/index.html">
                    <img alt="Image placeholder" src="../../assets/img/brand/dark.svg" id="navbar-logo">
                    <sup class="text-muted text-xs text-uppercase">Docs</sup>
                </a>
                <!-- Live preview -->
                <ul class="navbar-nav flex-row align-items-center d-lg-none">
                    <li class="nav-item">
                        <a href="../../index.html" class="nav-link nav-link-icon"><i data-feather="eye"></i></a>
                    </li>
                </ul>
                <!-- Navbar nav -->
                <div class="collapse navbar-collapse" id="navbar-main-collapse">
                    <!-- Right menu -->
                    <ul class="navbar-nav align-items-center mx-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="../../docs/getting-started/quick-start.html">Getting started</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../../docs/components/alerts.html">Components</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="https://github.com/webpixels/quick-website-ui-kit-demo/issues" target="_blank">Support</a>
                        </li>
                    </ul>
                </div>
                <a href="../../index.html" class="btn btn-sm btn-primary ml-4 btn-icon d-none d-lg-inline-flex">
                    <span class="btn-inner--icon"><i data-feather="chevron-left"></i></span>
                    <span class="btn-inner--text">Back to Quick</span>
                </a>
            </div>
        </nav>
    </header>
    <div class="container-fluid container-docs">
        <!-- Sidenav -->
        <nav class="sidenav navbar navbar-vertical navbar-expand-xs navbar-light bg-white" id="sidenav-main">
            <div class="scrollbar-inner px-4">
                <!-- Navigation -->
                <div class="docs-sidebar pt-6 pt-lg-7">
                    <h6 class="mt-4">Getting started</h6>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a href="../../docs/getting-started/quick-start.html" class="nav-link">Quick start</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/getting-started/build-tools.html" class="nav-link">Build tools</a>
                        </li>
                    </ul>
                    <h6 class="mt-4">Styleguide</h6>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a href="../../docs/styleguide/colors.html" class="nav-link">Colors</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/styleguide/typography.html" class="nav-link">Typography</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/styleguide/icons.html" class="nav-link">Icons</a>
                        </li>
                    </ul>
                    <h6 class="mt-4">Components</h6>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a href="../../docs/components/alerts.html" class="nav-link">Alerts</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/avatar.html" class="nav-link">Avatar</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/badge.html" class="nav-link">Badge</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/breadcrumb.html" class="nav-link">Breadcrumb</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/buttons.html" class="nav-link">Buttons</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/card.html" class="nav-link">Card</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/collapse.html" class="nav-link">Collapse</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/dropdowns.html" class="nav-link">Dropdowns</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/forms.html" class="nav-link">Forms</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/input-group.html" class="nav-link">Input group</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/modal.html" class="nav-link">Modal</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/navs.html" class="nav-link">Navs</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/navbar.html" class="nav-link">Navbar</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/pagination.html" class="nav-link">Pagination</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/popovers.html" class="nav-link">Popovers</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/progress.html" class="nav-link">Progress</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/spinners.html" class="nav-link">Spinners</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/tables.html" class="nav-link">Tables</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/toasts.html" class="nav-link">Toasts</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/tooltips.html" class="nav-link">Tooltips</a>
                        </li>
                    </ul>
                    <h6 class="mt-4">Plugins</h6>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a href="../../docs/plugins/animate.html" class="nav-link">Animate</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/plugins/google-maps.html" class="nav-link">Google maps</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Main content -->
        <div class="main-content row position-relative pb-5">
            <div class="col-xl-9 docs-content pb-5">
                <!-- Docs title -->
                <div class="docs-title">
                    <h1>Media object</h1>
                    <p class="lead mb-0">Documentation and examples for media object to construct highly repetitive components like blog comments, tweets, and the like.</p>
                    <div class="mt-4">
                        <a href="http://getbootstrap.com/docs/4.4/components/media-object" target="_blank">
                            <i data-feather="external-link" class="mr-2"></i> Bootstrap Documentation
                        </a>
                    </div>
                </div>
                <!-- Docs content -->
                <h2 id="basic">Basic</h2>
                <p>Below is an example of a single media object. Only two classes are required—the wrapping <code class="highlighter-rouge">.media</code> and the <code class="highlighter-rouge">.media-body</code> around your content</p>
                <div class="docs-example">
                    <a class="d-inline-block text-sm text-muted mb-3 text-underline--dashed" data-toggle="collapse" href="#basic" role="button" aria-expanded="false" aria-controls="basic">
                        Show code
                    </a>
                    <!-- Result -->
                    <div class="tab-example-result">
                        <div class="media">
                            <svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64">
                                <title>Placeholder</title>
                                <rect fill="" width="100%" height="100%" /><text fill="" dy=".3em" x="50%" y="50%">64x64</text>
                            </svg>
                            <div class="media-body">
                                <h5 class="mt-0">Media heading</h5>
                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                            </div>
                        </div>
                    </div><!-- Code -->
                    <div class="position-relative collapse fade mt-3" id="basic">
                        <!-- For users -->
                        <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"bd-placeholder-img mr-3"</span> <span class="na">width=</span><span class="s">"64"</span> <span class="na">height=</span><span class="s">"64"</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">preserveAspectRatio=</span><span class="s">"xMidYMid slice"</span> <span class="na">focusable=</span><span class="s">"false"</span> <span class="na">role=</span><span class="s">"img"</span> <span class="na">aria-label=</span><span class="s">"Placeholder: 64x64"</span><span class="nt">&gt;&lt;title&gt;</span>Placeholder<span class="nt">&lt;/title&gt;&lt;rect</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">width=</span><span class="s">"100%"</span> <span class="na">height=</span><span class="s">"100%"</span><span class="nt">/&gt;&lt;text</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">dy=</span><span class="s">".3em"</span> <span class="na">x=</span><span class="s">"50%"</span> <span class="na">y=</span><span class="s">"50%"</span><span class="nt">&gt;</span>64x64<span class="nt">&lt;/text&gt;&lt;/svg&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">&gt;</span>Media heading<span class="nt">&lt;/h5&gt;</span>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                    </div>
                </div>
                <h2 id="nested">Nested</h2>
                <p>Media objects can be infinitely nested, though we suggest you stop at some point. Place nested <code class="highlighter-rouge">.media</code> within the <code class="highlighter-rouge">.media-body</code> of a parent media object.</p>
                <div class="docs-example">
                    <a class="d-inline-block text-sm text-muted mb-3 text-underline--dashed" data-toggle="collapse" href="#nested" role="button" aria-expanded="false" aria-controls="nested">
                        Show code
                    </a>
                    <!-- Result -->
                    <div class="tab-example-result">
                        <div class="media">
                            <svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64">
                                <title>Placeholder</title>
                                <rect fill="" width="100%" height="100%" /><text fill="" dy=".3em" x="50%" y="50%">64x64</text>
                            </svg>
                            <div class="media-body">
                                <h5 class="mt-0">Media heading</h5>
                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                <div class="media mt-3">
                                    <a class="mr-3" href="#">
                                        <svg class="bd-placeholder-img" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64">
                                            <title>Placeholder</title>
                                            <rect fill="" width="100%" height="100%" /><text fill="" dy=".3em" x="50%" y="50%">64x64</text>
                                        </svg>
                                    </a>
                                    <div class="media-body">
                                        <h5 class="mt-0">Media heading</h5>
                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- Code -->
                    <div class="position-relative collapse fade mt-3" id="nested">
                        <!-- For users -->
                        <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"bd-placeholder-img mr-3"</span> <span class="na">width=</span><span class="s">"64"</span> <span class="na">height=</span><span class="s">"64"</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">preserveAspectRatio=</span><span class="s">"xMidYMid slice"</span> <span class="na">focusable=</span><span class="s">"false"</span> <span class="na">role=</span><span class="s">"img"</span> <span class="na">aria-label=</span><span class="s">"Placeholder: 64x64"</span><span class="nt">&gt;&lt;title&gt;</span>Placeholder<span class="nt">&lt;/title&gt;&lt;rect</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">width=</span><span class="s">"100%"</span> <span class="na">height=</span><span class="s">"100%"</span><span class="nt">/&gt;&lt;text</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">dy=</span><span class="s">".3em"</span> <span class="na">x=</span><span class="s">"50%"</span> <span class="na">y=</span><span class="s">"50%"</span><span class="nt">&gt;</span>64x64<span class="nt">&lt;/text&gt;&lt;/svg&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">&gt;</span>Media heading<span class="nt">&lt;/h5&gt;</span>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media mt-3"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"bd-placeholder-img"</span> <span class="na">width=</span><span class="s">"64"</span> <span class="na">height=</span><span class="s">"64"</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">preserveAspectRatio=</span><span class="s">"xMidYMid slice"</span> <span class="na">focusable=</span><span class="s">"false"</span> <span class="na">role=</span><span class="s">"img"</span> <span class="na">aria-label=</span><span class="s">"Placeholder: 64x64"</span><span class="nt">&gt;&lt;title&gt;</span>Placeholder<span class="nt">&lt;/title&gt;&lt;rect</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">width=</span><span class="s">"100%"</span> <span class="na">height=</span><span class="s">"100%"</span><span class="nt">/&gt;&lt;text</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">dy=</span><span class="s">".3em"</span> <span class="na">x=</span><span class="s">"50%"</span> <span class="na">y=</span><span class="s">"50%"</span><span class="nt">&gt;</span>64x64<span class="nt">&lt;/text&gt;&lt;/svg&gt;</span>
      <span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">&gt;</span>Media heading<span class="nt">&lt;/h5&gt;</span>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                    </div>
                </div>
                <h2 id="options">Options</h2>
                <p>Here are a few options you can use to customize a media object:</p>
                <h3 id="alignment">Alignment</h3>
                <p>Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of your <code class="highlighter-rouge">.media-body</code> content.</p>
                <div class="docs-example">
                    <a class="d-inline-block text-sm text-muted mb-3 text-underline--dashed" data-toggle="collapse" href="#align-start" role="button" aria-expanded="false" aria-controls="align-start">
                        Show code
                    </a>
                    <!-- Result -->
                    <div class="tab-example-result">
                        <div class="media">
                            <svg class="bd-placeholder-img align-self-start mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64">
                                <title>Placeholder</title>
                                <rect fill="" width="100%" height="100%" /><text fill="" dy=".3em" x="50%" y="50%">64x64</text>
                            </svg>
                            <div class="media-body">
                                <h5 class="mt-0">Top-aligned media</h5>
                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                                <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                            </div>
                        </div>
                    </div><!-- Code -->
                    <div class="position-relative collapse fade mt-3" id="align-start">
                        <!-- For users -->
                        <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"bd-placeholder-img align-self-start mr-3"</span> <span class="na">width=</span><span class="s">"64"</span> <span class="na">height=</span><span class="s">"64"</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">preserveAspectRatio=</span><span class="s">"xMidYMid slice"</span> <span class="na">focusable=</span><span class="s">"false"</span> <span class="na">role=</span><span class="s">"img"</span> <span class="na">aria-label=</span><span class="s">"Placeholder: 64x64"</span><span class="nt">&gt;&lt;title&gt;</span>Placeholder<span class="nt">&lt;/title&gt;&lt;rect</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">width=</span><span class="s">"100%"</span> <span class="na">height=</span><span class="s">"100%"</span><span class="nt">/&gt;&lt;text</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">dy=</span><span class="s">".3em"</span> <span class="na">x=</span><span class="s">"50%"</span> <span class="na">y=</span><span class="s">"50%"</span><span class="nt">&gt;</span>64x64<span class="nt">&lt;/text&gt;&lt;/svg&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">&gt;</span>Top-aligned media<span class="nt">&lt;/h5&gt;</span>
    <span class="nt">&lt;p&gt;</span>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;p&gt;</span>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                    </div>
                </div>
                <div class="docs-example">
                    <a class="d-inline-block text-sm text-muted mb-3 text-underline--dashed" data-toggle="collapse" href="#align-center" role="button" aria-expanded="false" aria-controls="align-center">
                        Show code
                    </a>
                    <!-- Result -->
                    <div class="tab-example-result">
                        <div class="media">
                            <svg class="bd-placeholder-img align-self-center mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64">
                                <title>Placeholder</title>
                                <rect fill="" width="100%" height="100%" /><text fill="" dy=".3em" x="50%" y="50%">64x64</text>
                            </svg>
                            <div class="media-body">
                                <h5 class="mt-0">Center-aligned media</h5>
                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                                <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                            </div>
                        </div>
                    </div><!-- Code -->
                    <div class="position-relative collapse fade mt-3" id="align-center">
                        <!-- For users -->
                        <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"bd-placeholder-img align-self-center mr-3"</span> <span class="na">width=</span><span class="s">"64"</span> <span class="na">height=</span><span class="s">"64"</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">preserveAspectRatio=</span><span class="s">"xMidYMid slice"</span> <span class="na">focusable=</span><span class="s">"false"</span> <span class="na">role=</span><span class="s">"img"</span> <span class="na">aria-label=</span><span class="s">"Placeholder: 64x64"</span><span class="nt">&gt;&lt;title&gt;</span>Placeholder<span class="nt">&lt;/title&gt;&lt;rect</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">width=</span><span class="s">"100%"</span> <span class="na">height=</span><span class="s">"100%"</span><span class="nt">/&gt;&lt;text</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">dy=</span><span class="s">".3em"</span> <span class="na">x=</span><span class="s">"50%"</span> <span class="na">y=</span><span class="s">"50%"</span><span class="nt">&gt;</span>64x64<span class="nt">&lt;/text&gt;&lt;/svg&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">&gt;</span>Center-aligned media<span class="nt">&lt;/h5&gt;</span>
    <span class="nt">&lt;p&gt;</span>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                    </div>
                </div>
                <div class="docs-example">
                    <a class="d-inline-block text-sm text-muted mb-3 text-underline--dashed" data-toggle="collapse" href="#align-end" role="button" aria-expanded="false" aria-controls="align-end">
                        Show code
                    </a>
                    <!-- Result -->
                    <div class="tab-example-result">
                        <div class="media">
                            <svg class="bd-placeholder-img align-self-end mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64">
                                <title>Placeholder</title>
                                <rect fill="" width="100%" height="100%" /><text fill="" dy=".3em" x="50%" y="50%">64x64</text>
                            </svg>
                            <div class="media-body">
                                <h5 class="mt-0">Bottom-aligned media</h5>
                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                                <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                            </div>
                        </div>
                    </div><!-- Code -->
                    <div class="position-relative collapse fade mt-3" id="align-end">
                        <!-- For users -->
                        <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"bd-placeholder-img align-self-end mr-3"</span> <span class="na">width=</span><span class="s">"64"</span> <span class="na">height=</span><span class="s">"64"</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">preserveAspectRatio=</span><span class="s">"xMidYMid slice"</span> <span class="na">focusable=</span><span class="s">"false"</span> <span class="na">role=</span><span class="s">"img"</span> <span class="na">aria-label=</span><span class="s">"Placeholder: 64x64"</span><span class="nt">&gt;&lt;title&gt;</span>Placeholder<span class="nt">&lt;/title&gt;&lt;rect</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">width=</span><span class="s">"100%"</span> <span class="na">height=</span><span class="s">"100%"</span><span class="nt">/&gt;&lt;text</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">dy=</span><span class="s">".3em"</span> <span class="na">x=</span><span class="s">"50%"</span> <span class="na">y=</span><span class="s">"50%"</span><span class="nt">&gt;</span>64x64<span class="nt">&lt;/text&gt;&lt;/svg&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">&gt;</span>Bottom-aligned media<span class="nt">&lt;/h5&gt;</span>
    <span class="nt">&lt;p&gt;</span>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                    </div>
                </div>
                <h3 id="order">Order</h3>
                <p>Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the <code class="highlighter-rouge">order</code> property (to an integer of your choosing).</p>
                <div class="docs-example">
                    <a class="d-inline-block text-sm text-muted mb-3 text-underline--dashed" data-toggle="collapse" href="#order" role="button" aria-expanded="false" aria-controls="order">
                        Show code
                    </a>
                    <!-- Result -->
                    <div class="tab-example-result">
                        <div class="media">
                            <div class="media-body">
                                <h5 class="mt-0 mb-1">Media object</h5>
                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                            </div>
                            <svg class="bd-placeholder-img ml-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64">
                                <title>Placeholder</title>
                                <rect fill="" width="100%" height="100%" /><text fill="" dy=".3em" x="50%" y="50%">64x64</text>
                            </svg>
                        </div>
                    </div><!-- Code -->
                    <div class="position-relative collapse fade mt-3" id="order">
                        <!-- For users -->
                        <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mt-0 mb-1"</span><span class="nt">&gt;</span>Media object<span class="nt">&lt;/h5&gt;</span>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"bd-placeholder-img ml-3"</span> <span class="na">width=</span><span class="s">"64"</span> <span class="na">height=</span><span class="s">"64"</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">preserveAspectRatio=</span><span class="s">"xMidYMid slice"</span> <span class="na">focusable=</span><span class="s">"false"</span> <span class="na">role=</span><span class="s">"img"</span> <span class="na">aria-label=</span><span class="s">"Placeholder: 64x64"</span><span class="nt">&gt;&lt;title&gt;</span>Placeholder<span class="nt">&lt;/title&gt;&lt;rect</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">width=</span><span class="s">"100%"</span> <span class="na">height=</span><span class="s">"100%"</span><span class="nt">/&gt;&lt;text</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">dy=</span><span class="s">".3em"</span> <span class="na">x=</span><span class="s">"50%"</span> <span class="na">y=</span><span class="s">"50%"</span><span class="nt">&gt;</span>64x64<span class="nt">&lt;/text&gt;&lt;/svg&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                    </div>
                </div>
                <h3 id="media-list">Media list</h3>
                <p>Because the media object has so few structural requirements, you can also use these classes on list HTML elements. On your <code class="highlighter-rouge">&lt;ul&gt;</code> or <code class="highlighter-rouge">&lt;ol&gt;</code>, add the <code class="highlighter-rouge">.list-unstyled</code> to remove any browser default list styles, and then apply <code class="highlighter-rouge">.media</code> to your <code class="highlighter-rouge">&lt;li&gt;</code>s. As always, use spacing utilities wherever needed to fine tune.</p>
                <div class="docs-example">
                    <a class="d-inline-block text-sm text-muted mb-3 text-underline--dashed" data-toggle="collapse" href="#media-list" role="button" aria-expanded="false" aria-controls="media-list">
                        Show code
                    </a>
                    <!-- Result -->
                    <div class="tab-example-result">
                        <ul class="list-unstyled">
                            <li class="media">
                                <svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64">
                                    <title>Placeholder</title>
                                    <rect fill="" width="100%" height="100%" /><text fill="" dy=".3em" x="50%" y="50%">64x64</text>
                                </svg>
                                <div class="media-body">
                                    <h5 class="mt-0 mb-1">List-based media object</h5>
                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                </div>
                            </li>
                            <li class="media my-4">
                                <svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64">
                                    <title>Placeholder</title>
                                    <rect fill="" width="100%" height="100%" /><text fill="" dy=".3em" x="50%" y="50%">64x64</text>
                                </svg>
                                <div class="media-body">
                                    <h5 class="mt-0 mb-1">List-based media object</h5>
                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                </div>
                            </li>
                            <li class="media">
                                <svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64">
                                    <title>Placeholder</title>
                                    <rect fill="" width="100%" height="100%" /><text fill="" dy=".3em" x="50%" y="50%">64x64</text>
                                </svg>
                                <div class="media-body">
                                    <h5 class="mt-0 mb-1">List-based media object</h5>
                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                </div>
                            </li>
                        </ul>
                    </div><!-- Code -->
                    <div class="position-relative collapse fade mt-3" id="media-list">
                        <!-- For users -->
                        <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-unstyled"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"bd-placeholder-img mr-3"</span> <span class="na">width=</span><span class="s">"64"</span> <span class="na">height=</span><span class="s">"64"</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">preserveAspectRatio=</span><span class="s">"xMidYMid slice"</span> <span class="na">focusable=</span><span class="s">"false"</span> <span class="na">role=</span><span class="s">"img"</span> <span class="na">aria-label=</span><span class="s">"Placeholder: 64x64"</span><span class="nt">&gt;&lt;title&gt;</span>Placeholder<span class="nt">&lt;/title&gt;&lt;rect</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">width=</span><span class="s">"100%"</span> <span class="na">height=</span><span class="s">"100%"</span><span class="nt">/&gt;&lt;text</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">dy=</span><span class="s">".3em"</span> <span class="na">x=</span><span class="s">"50%"</span> <span class="na">y=</span><span class="s">"50%"</span><span class="nt">&gt;</span>64x64<span class="nt">&lt;/text&gt;&lt;/svg&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mt-0 mb-1"</span><span class="nt">&gt;</span>List-based media object<span class="nt">&lt;/h5&gt;</span>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"media my-4"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"bd-placeholder-img mr-3"</span> <span class="na">width=</span><span class="s">"64"</span> <span class="na">height=</span><span class="s">"64"</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">preserveAspectRatio=</span><span class="s">"xMidYMid slice"</span> <span class="na">focusable=</span><span class="s">"false"</span> <span class="na">role=</span><span class="s">"img"</span> <span class="na">aria-label=</span><span class="s">"Placeholder: 64x64"</span><span class="nt">&gt;&lt;title&gt;</span>Placeholder<span class="nt">&lt;/title&gt;&lt;rect</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">width=</span><span class="s">"100%"</span> <span class="na">height=</span><span class="s">"100%"</span><span class="nt">/&gt;&lt;text</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">dy=</span><span class="s">".3em"</span> <span class="na">x=</span><span class="s">"50%"</span> <span class="na">y=</span><span class="s">"50%"</span><span class="nt">&gt;</span>64x64<span class="nt">&lt;/text&gt;&lt;/svg&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mt-0 mb-1"</span><span class="nt">&gt;</span>List-based media object<span class="nt">&lt;/h5&gt;</span>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"bd-placeholder-img mr-3"</span> <span class="na">width=</span><span class="s">"64"</span> <span class="na">height=</span><span class="s">"64"</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">preserveAspectRatio=</span><span class="s">"xMidYMid slice"</span> <span class="na">focusable=</span><span class="s">"false"</span> <span class="na">role=</span><span class="s">"img"</span> <span class="na">aria-label=</span><span class="s">"Placeholder: 64x64"</span><span class="nt">&gt;&lt;title&gt;</span>Placeholder<span class="nt">&lt;/title&gt;&lt;rect</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">width=</span><span class="s">"100%"</span> <span class="na">height=</span><span class="s">"100%"</span><span class="nt">/&gt;&lt;text</span> <span class="na">fill=</span><span class="s">""</span> <span class="na">dy=</span><span class="s">".3em"</span> <span class="na">x=</span><span class="s">"50%"</span> <span class="na">y=</span><span class="s">"50%"</span><span class="nt">&gt;</span>64x64<span class="nt">&lt;/text&gt;&lt;/svg&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mt-0 mb-1"</span><span class="nt">&gt;</span>List-based media object<span class="nt">&lt;/h5&gt;</span>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre>
                        </figure>
                    </div>
                </div>
                <h2 id="examples">Examples</h2>
                <h3 id="status">Status</h3>
                <div class="docs-example">
                    <a class="d-inline-block text-sm text-muted mb-3 text-underline--dashed" data-toggle="collapse" href="#media-object-online-status" role="button" aria-expanded="false" aria-controls="media-object-online-status">
                        Show code
                    </a>
                    <!-- Result -->
                    <div class="tab-example-result">
                        <div class="row align-items-center">
                            <div class="col-auto">
                                <!-- Avatar -->
                                <a href="#" class="avatar rounded-circle">
                                    <img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="" />
                                </a>
                            </div>
                            <div class="col ml-n2">
                                <a href="#!" class="d-block h6 mb-0">Michael Jordan</a>
                                <div>
                                    <span class="text-sm text-danger">●</span>
                                    <small>Inactive</small>
                                </div>
                            </div>
                            <div class="col-auto">
                                <button type="button" class="btn btn-xs btn-secondary btn-icon">
                                    <span class="btn-inner--icon"><i class="fas fa-plus"></i></span>
                                    <span class="btn-inner--text">Add</span>
                                </button>
                            </div>
                        </div>
                    </div><!-- Code -->
                    <div class="position-relative collapse fade mt-3" id="media-object-online-status">
                        <!-- For users -->
                        <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row align-items-center"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
        <span class="c">&lt;!-- Avatar --&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"avatar rounded-circle"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;img</span> <span class="na">alt=</span><span class="s">"Image placeholder"</span> <span class="na">src=</span><span class="s">"../../assets/img/theme/light/person-1.jpg"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>

<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col ml-n2"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#!"</span> <span class="na">class=</span><span class="s">"d-block h6 mb-0"</span><span class="nt">&gt;</span>Michael Jordan<span class="nt">&lt;/a&gt;&lt;div&gt;</span>
            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-sm text-danger"</span><span class="nt">&gt;</span>●<span class="nt">&lt;/span&gt;</span>
            <span class="nt">&lt;small&gt;</span>Inactive<span class="nt">&lt;/small&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-xs btn-secondary btn-icon"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-plus"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Add<span class="nt">&lt;/span&gt;</span>
        <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                    </div>
                </div>
                <h3 id="progress">Progress</h3>
                <div class="docs-example">
                    <a class="d-inline-block text-sm text-muted mb-3 text-underline--dashed" data-toggle="collapse" href="#media-object-progress" role="button" aria-expanded="false" aria-controls="media-object-progress">
                        Show code
                    </a>
                    <!-- Result -->
                    <div class="tab-example-result">
                        <div class="row align-items-center">
                            <div class="col-auto">
                                <!-- Avatar -->
                                <img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar  rounded-circle" />
                            </div>
                            <div class="col ml-n2">
                                <div class="progress-wrapper">
                                    <a href="#!" class="progress-label font-weight-bold">Progress bar</a>
                                    <span class="progress-percentage"><small class="font-weight-bold">Completed: </small>70%</span>
                                    <div class="progress progress-xs mt-2">
                                        <div class="progress-bar bg-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- Code -->
                    <div class="position-relative collapse fade mt-3" id="media-object-progress">
                        <!-- For users -->
                        <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row align-items-center"</span><span class="nt">&gt;</span>
	<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
		<span class="c">&lt;!-- Avatar --&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">alt=</span><span class="s">"Image placeholder"</span> <span class="na">src=</span><span class="s">"../../assets/img/theme/light/person-1.jpg"</span> <span class="na">class=</span><span class="s">"avatar  rounded-circle"</span><span class="nt">&gt;</span>

	<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col ml-n2"</span><span class="nt">&gt;</span>
		<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-wrapper"</span><span class="nt">&gt;</span>
			<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#!"</span> <span class="na">class=</span><span class="s">"progress-label font-weight-bold"</span><span class="nt">&gt;</span>Progress bar<span class="nt">&lt;/a&gt;</span>
			<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"progress-percentage"</span><span class="nt">&gt;&lt;small</span> <span class="na">class=</span><span class="s">"font-weight-bold"</span><span class="nt">&gt;</span>Completed: <span class="nt">&lt;/small&gt;</span>70%<span class="nt">&lt;/span&gt;</span>
			<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-xs mt-2"</span><span class="nt">&gt;</span>
				<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-success"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"70"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 70%;"</span><span class="nt">&gt;&lt;/div&gt;</span>
			<span class="nt">&lt;/div&gt;</span>
		<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                    </div>
                </div>
                <h3 id="comment">Comment</h3>
                <div class="docs-example">
                    <a class="d-inline-block text-sm text-muted mb-3 text-underline--dashed" data-toggle="collapse" href="#media-notification" role="button" aria-expanded="false" aria-controls="media-notification">
                        Show code
                    </a>
                    <!-- Result -->
                    <div class="tab-example-result">
                        <div class="media media-comment">
                            <img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar  avatar-lg media-comment-avatar rounded-circle mr-4" />
                            <div class="media-body">
                                <div class="media-comment-bubble left-top">
                                    <h6 class="mt-0">Alexis Ren</h6>
                                    <p class="text-sm lh-160">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                                    <div class="icon-actions">
                                        <a href="#" class="love active">
                                            <i data-feather="heart"></i>
                                            <span class="text-muted">10 likes</span>
                                        </a>
                                        <a href="#">
                                            <i data-feather="message-circle"></i>
                                            <span class="text-muted">1 reply</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- Code -->
                    <div class="position-relative collapse fade mt-3" id="media-notification">
                        <!-- For users -->
                        <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media media-comment"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;img</span> <span class="na">alt=</span><span class="s">"Image placeholder"</span> <span class="na">src=</span><span class="s">"../../assets/img/theme/light/person-1.jpg"</span> <span class="na">class=</span><span class="s">"avatar  avatar-lg media-comment-avatar rounded-circle mr-4"</span><span class="nt">&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-comment-bubble left-top"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;h6</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">&gt;</span>Alexis Ren<span class="nt">&lt;/h6&gt;</span>
            <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-sm lh-160"</span><span class="nt">&gt;</span>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.<span class="nt">&lt;/p&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"icon-actions"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"love active"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;i</span> <span class="na">data-feather=</span><span class="s">"heart"</span><span class="nt">&gt;&lt;/i&gt;</span>
                    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>10 likes<span class="nt">&lt;/span&gt;</span>
                <span class="nt">&lt;/a&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;i</span> <span class="na">data-feather=</span><span class="s">"message-circle"</span><span class="nt">&gt;&lt;/i&gt;</span>
                    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>1 reply<span class="nt">&lt;/span&gt;</span>
                <span class="nt">&lt;/a&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 docs-sidebar d-none d-xl-block">
                <div class="toc-sidebar pl-4 mt-lg-8 border-left">
                    <div class="scrollbar-inner">
                        <h6 class="mb-3">Summary</h6>
                        <ul class="section-nav">
                            <li class="toc-entry toc-h2"><a href="#basic">Basic</a></li>
                            <li class="toc-entry toc-h2"><a href="#nested">Nested</a></li>
                            <li class="toc-entry toc-h2"><a href="#options">Options</a>
                                <ul>
                                    <li class="toc-entry toc-h3"><a href="#alignment">Alignment</a></li>
                                    <li class="toc-entry toc-h3"><a href="#order">Order</a></li>
                                    <li class="toc-entry toc-h3"><a href="#media-list">Media list</a></li>
                                </ul>
                            </li>
                            <li class="toc-entry toc-h2"><a href="#examples">Examples</a>
                                <ul>
                                    <li class="toc-entry toc-h3"><a href="#status">Status</a></li>
                                    <li class="toc-entry toc-h3"><a href="#progress">Progress</a></li>
                                    <li class="toc-entry toc-h3"><a href="#comment">Comment</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer -->
    <!-- Scripts -->
    <!-- Core JS  -->
    <script src="../../assets/libs/jquery/dist/jquery.min.js"></script>
    <script src="../../assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../assets/libs/svg-injector/dist/svg-injector.min.js"></script>
    <script src="../../assets/libs/feather-icons/dist/feather.min.js"></script>
    <!-- Docs JS -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>
    <script src="../../assets/libs/clipboard/dist/clipboard.min.js"></script>
    <!-- Quick JS -->
    <script src="../../assets/js/quick-website.js"></script>
    <!-- Feather Icons -->
    <script>
        feather.replace({
            'width': '1em',
            'height': '1em'
        })
    </script>
</body>

</html>